<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="主页demo/js/jquery-3.6.0.min.js"></script>
		<script src="./js/layui/layui.js"></script>
		<link rel="stylesheet" href="./js/layui/css/layui.css" />
		<link rel="stylesheet"  href="css/base.css"/>
		<style>
		/* 	.main{
				width: 200px;
				height: 500px;
				background: url(img/1.jpg);
				background-repeat: no-repeat;
				background-size: 200px 500px;
				background-position: center;
				

			}
			.main:hover{
				background-size: 300px 600px;
				transition: all 0.5s ease-in-out;
				transform:rotate(5deg);
				filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
			} */
			.imgdiv{
				width: 200px;
				height: 500px;
				border: 1px solid red;
				overflow: hidden;
				text-align: center;
				vertical-align: middle;
				position: relative;
			}
			.imgdiv>img{
				position: relative;
				width: 200px;
				height: 500px;
			}
			.imgdiv>img:hover{
				width: 300px;
				height: 600px;
				transition: all 0.5s ease-in-out;
				margin: 0 -50%;
				/* 使用scale放大元素被scale放大的元素,看起来很大,但是实际占据的位置还是原来的大小 */
				transform: scale(1); 
				
			}
		</style>
	</head>
	<body>
	<!-- 	<div>
			<div class="main">
				
			</div>
		</div>
		 -->
		
		
		<div class="imgdiv">
			<img src="img/1.jpg" >
		</div>
		<script>
			$(function(){
				
			})
		</script>
	</body>
</html>
